import React, { Component } from 'react'
import echarts from 'echarts'
import axios from 'axios'
import _ from 'lodash'
export default class Tubiao extends Component {
    echartData=[]
    myChart=null
    render() {
        return (
            <div style={{height:"500px",width:"100%"}}>
                <div id="myChart" style={{height:"100%"}}></div> 
            </div>
        )
    }

    componentDidMount() {
        axios.get("http://localhost:5000/dishes").then(res=>{
             //数据处理
            this.renderData(res.data)

            this.getEchasrt()
        })
        window.onresize =()=>{
            this.myChart && this.myChart.resize()
        }
    }

    componentWillUnmount(){
        window.onresize = null
    }
    
   renderData=(data)=>{
    let newData=_.groupBy(data,"city") 
    this.echartData = newData
   }
   getEchasrt=()=>{
        // 指定图表的配置项和数据
        var option = {
            title: { //表格标题
                text: '地区情况'
            },
            tooltip: {},//工具栏
            legend: { //主体名称。与series中的name一致
                data:['数量']
            },
            xAxis: {  //x轴的数据
                data: Object.keys(this.echartData)
            },
            yAxis: {
                minInterval:1
            }, //y轴的数据
            series: [{ //配置和数据
                name: '数量',
                type: 'bar', //图标类型
                itemStyle: { normal: 
                    { color: function (params)
                         { var colorList = [ '#ffb400', '#00ff4e', '#ff0000', '#00ddff', '#baff00','#00ff06' ]
                         return colorList[params.dataIndex] 
                        } 
                    } 
                }, //不同柱颜色不一样
                data: Object.values(this.echartData).map(item=>item.length) //数据
            }]
        };

            this.myChart = echarts.init(document.getElementById('myChart'));
            this.myChart.setOption(option);
           
   }
    
}
